<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成语的详细界面</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        body{
            background-image: url("image/background_img.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        .card-header span{
            color: #CB442D;
            font-weight: bold;
        }
        .card-body{
            font-size: 14px;
        }
    </style>
</head>
<body>
    <header id="header"></header>
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item"><a href="idiom.html">成语</a></li>
                <li class="breadcrumb-item active" aria-current="page" v-text="idiomTitle">哀哀父母</li>
            </ol>
        </nav>

        <div class="row" id="idiomDetail">
            <div class="col col-sm-12 col-lg-12">
                <div class="card mt-3">
                    <div class="card-header">
                        <h6><span v-text="idiom.title">哀哀父母</span> 拼音</h6>
                    </div>
                    <div class="card-body">
                        <p>「<span v-html="idiom.pinyin">āi āi fù mǔ</span>」</p>
                        <p style="font-size: 13px">※提示：拼音为程序生成，因此多音字的拼音可能不准确。</p>
                    </div>
                    <div class="card-header">
                        <h6><span v-text="idiom.title">哀哀父母</span> 解释</h6>
                    </div>
                    <div class="card-body">
                        <p v-html="idiom.txt">可哀呀可哀，我的父母啊！原指古时在暴政下人民终年在外服劳役，对父母病痛、老死不能照料而悲哀。   </p>
                    </div>
                    <div class="card-header">
                        <h6><span v-text="idiom.title">哀哀父母</span> 出处</h6>
                    </div>
                    <div class="card-body">
                        <p v-html="idiom.chuchu">《诗经·小雅·蓼莪》：“蓼蓼者莪，匪莪伊蒿，哀哀父母，生我劬劳。”</p>
                    </div>
                    <div class="card-header">
                        <h6><span v-text="idiom.title">哀哀父母</span> 例句</h6>
                    </div>
                    <div class="card-body">
                        <p v-html="idiom.liju">咱人有子方知不孝娘，岂不问～情肠！（元·无名氏《小张屠》第一折）</p>
                    </div>
                </div>
                </div>
        </div>
    </div>

    <footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")

    //获取当前成语的名字
    var idiomTitle = decodeURI(location.search.split("?")[1])

    let vm_idiom = new Vue({
        el:"#idiomDetail",
        data:{
            idiom:{},
            title:""
        },
        created:function () {
            axios({
                url:"/idiom/selectOne/"+idiomTitle,
                method:"post"
            }).then(function (r) {
                vm_idiom.idiom = r.data
                vm_idiom.title = idiomTitle;
                console.log(r.data)
            })
        }
    })
</script>
</html>